<template>
  <el-dialog
    title="导入风控计划"
    :model-value="modelValue"
    @close="closed"
    width="22%"
  >
    <div class="center">
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="true"
        @click="clickUploadPanel"
        drag
      >
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板
            </el-link>
          </div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>

import { getToken } from '@/utils/auth'

const { proxy } = getCurrentInstance();

defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
});
const emits = defineEmits(["update:modelValue", "refresh"]);

/**
 * 关闭
 */
const closed = () => {
  emits("update:modelValue", false);
};


const upload = reactive({
  isUploading: false,
  headers: { Authorization: "Bearer " + getToken() },
  url: "/dev-api/platform/riskControlPlan/importExcel",
});

const clickUploadPanel = () => {
  if (upload.isUploading) {
    proxy.$modal.alert("请选择要导入的类型");
  }
};
//文件上传中处理
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};
// 文件上传成功处理
const handleFileSuccess = (response, file, fileList) => {
  upload.isUploading = false;
  if (response.code === 200) {
    proxy.$modal.msgSuccess("上传成功");
    emits('refresh')
    closed()
  }
  if (response.code === 500) {
    proxy.$modal.msgError("上传失败");
  }

  proxy.$refs["uploadRef"].handleRemove(file);
};
const importTemplate = () => {
  proxy.download(
    "platform/riskControlPlan/downloadTemplate",
    {
    },
    `风控计划_${new Date().getTime()}.xlsx`
  );
};
</script>

<style lang="scss" scoped>
.center {
  text-align: center;
  .title {
    margin-bottom: 12px;
  }
}
</style>